<template>
  <view class="bg-fff">
    <view class="flex align-center justify-center" :class="[{'pt-50' : !isSimplify},{'pb-30' : !isSimplify }]">
      <view class="border-2D8CF0 color-2D8CF0 fz-30 lh-60 text-center br-5" @tap="chooseStartTime" :class="isSimplify ? 'min-w-140' : 'w-200'">
        <text>{{ formatShowDate(choiceStartTime) || '开始时间'  }}</text>
      </view>
      <view class="w-20 h-5 br-5 bg-2D8CF0 m-lr-4"></view>
      <view class="border-2D8CF0 color-2D8CF0 fz-30 lh-60 text-center br-5" @tap="chooseEndTime" :class="isSimplify ? 'min-w-140' : 'w-200'">
        <text>{{ formatShowDate(choiceEndTime) || '结束时间'  }} </text>
      </view>
    </view>
    <u-picker
        :defaultTime="defaultTime"
        v-model="isTimePickerShow"
        :params="params"
        mode="time"
        safe-area-inset-bottom
        :title="title"
        @confirm="confirm"
        @cancel="cancel"
    >
    </u-picker>

    <!--时间选择错误模态框 -->
    <u-modal border-radius="20" :show-confirm-button="false" :show-title="false" mask-close-able v-model="isTimeError">
      <view class="h-150 flex align-center justify-center font-bold">
        <image class="mr-20 w-38 h-38" src="@/static/images/mine/error.png"></image>
        <text>时间选择错误！</text>
      </view>
    </u-modal>
  </view>
</template>

<script>
import dayjs from '@/libs/dayjs.min.js'
export default {
  name: "DatePicker",
  props:{
    defaultStartDate:{
      type: String,
      default:''
    },
    defaultEndDate:{
      type: String,
      default:''
    },
    isSimplify:{
      type: Boolean,
      default:false
    }
  },
  created() {
    if(this.defaultStartDate){
      this.choiceStartTime = this.defaultStartDate
    }
    if(this.defaultEndDate){
      this.choiceEndTime = this.defaultEndDate
    }
  },
  data(){
    return {
      isTimePickerShow:false,
      title:'',
      params: {
        year: true,
        month: true,
        day: true,
        hour: false,
        minute: false,
        second: false
      },
      timeType:'',
      startTime:'',
      endTime:'',
      choiceStartTime: '',
      choiceEndTime: '',
      defaultTime: dayjs().format('YYYY-MM-DD'),
      isTimeError: false
    }
  },
  methods:{
    formatShowDate(dateStr){
      if(!dateStr) return ''
      if(this.isSimplify){
        return dateStr.slice(2)
      }else{
        return dateStr
      }
    },
    cancel(){
      if(this.timeType === 'start'){
        this.choiceStartTime = ''
        this.startTime = ''
      }
      if(this.timeType === 'end'){
        this.choiceEndTime = ''
        this.endTime = ''
      }
      this.$emit('changeTime', { startTime:this.choiceStartTime, endTime: this.choiceEndTime })
    },
    reset(){
      this.choiceStartTime = ''
      this.choiceEndTime = ''
      this.startTime = ''
      this.endTime = ''
    },
    chooseStartTime(){
      this.isTimePickerShow = true
      this.defaultTime= dayjs(this.startTime || new Date()).format('YYYY-MM-DD')
      this.title = '选择开始时间'
      this.timeType = 'start'
    },
    chooseEndTime(){
      this.isTimePickerShow = true
      this.defaultTime= dayjs(this.endTime || new Date()).format('YYYY-MM-DD')
      this.title = '选择结束时间'
      this.timeType = 'end'
    },
    confirm(e){
      if(this.timeType === 'start'){
        this.startTime = `${e.year}-${e.month}-${e.day} 00:00:00`
        this.choiceStartTime = dayjs(this.startTime).format('YYYY-MM-DD')
        this.defaultTime= dayjs(this.startTime || new Date()).format('YYYY-MM-DD')
      }
      else{
        this.endTime = `${e.year}-${e.month}-${e.day} 23:59:59`
        this.choiceEndTime = dayjs(this.endTime).format('YYYY-MM-DD')
        this.defaultTime= dayjs(this.endTime || new Date()).format('YYYY-MM-DD')
      }
      this.$emit('changeTime', { startTime:this.choiceStartTime, endTime: this.choiceEndTime })
    }
  }
}
</script>

<style scoped>

</style>